<template>
  <div class="container">

    <!-- 搜索区域 -->
    <el-row>
      <el-form :inline="true">
        <el-form-item label="文章名称">
          <el-input v-model="queryInfo.name" placeholder="请输入文章名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="toAddHeartknowledge">新增文章</el-button>
          <el-button type="danger">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="HeartknowledgeList" border style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="标题">
      </el-table-column>
      <el-table-column prop="simplyintroduce" label="简介">
      </el-table-column>
      <!-- <el-table-column prop="img" label="图片名">
      </el-table-column> -->
	  <el-table-column prop="img" label="文章图片">
	   <template slot-scope='scope'> 
	  	<el-image style="width: 100px; height: 100px" 	:src="'http://localhost:8888/sfzy/downLoad?filename='+scope.row.img"
	  	></el-image>
	  </template>
	  </el-table-column>
	  
      <el-table-column prop="text" label="详情内容">
      </el-table-column>
      
     <el-table-column label="操作">
     	<template slot-scope='scope'>
     		<el-link type="primary" @click="toEditHeartknowledge(scope.row)">编辑</el-link>
     	<el-link type="primary" @click="deleteHeartknowledge(scope.row.id)">删除</el-link>
     	</template>
     </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="queryInfo.pageNum" :page-sizes="[2, 6, 8, 10]" :page-size="queryInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 新增和修改的对话框 -->
    <!-- dialog中绑定close事件，实现对话框右上角叉号的取消功能 -->
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="cancle">
      <el-form :model="Heartknowledge">
        <el-form-item label="标题" label-width="80px">
          <el-input placeholder="标题" v-model="Heartknowledge.name"></el-input>
        </el-form-item>
        <el-form-item label="简介" label-width="80px">
          <el-input placeholder="请输入简介" v-model="Heartknowledge.simplyintroduce"></el-input>
        </el-form-item>

       <!-- <el-form-item label="图片名" label-width="80px">
          <el-input placeholder="图片名" v-model="Heartknowledge.img"></el-input>
        </el-form-item> -->
<el-form-item label="文章图片" label-width="80px">
	<!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart"></el-input> -->
	<!-- 
		 el-upload:上传组件
			action： 上传网址
			list-type：上传组件类型
			on-preview ： 图片预览事件
			on-remove ：移除图片事件
			el-dialog : 预览图片组件
			on-success : 上传成功后的回调函数
			limit  ： 限制上传图片个数
	-->
	<el-upload action="http://localhost:8888/sfzy/upload" list-type="picture-card"  :on-success="handleSuccess" :file-list="fileList" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
	<i class="el-icon-plus"></i>
	</el-upload>
	<el-dialog :visible.sync="dialogVisible">
		<img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
</el-form-item>



      <!--  <el-form-item label="详情内容" label-width="80px">
          <el-input placeholder="详情内容" v-model="Heartknowledge.text"></el-input>
        </el-form-item> -->

     <el-form-item label="文章详情" label-width="80px">
     	<!-- 富文本编辑器组件 -->
     	<quill-editor v-model="Heartknowledge.text"></quill-editor>
     </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="addHeartknowledge">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      // 查询信息对象
      queryInfo: {
        name: '',
        pageNum: 1,
        pageSize: 2
      },
      total: 0,
      HeartknowledgeList: [],
      title: '添加', // 对话框标题
      dialogFormVisible: false, // 是否显示对话框
      Heartknowledge: {
        // 文章对象
        "id":'',
        "name": "",
        "simplyintroduce": "",
        "img": "",
        "text": ""
       
      },
	  // ----------需要定义的数据------------
	  dialogImageUrl: '', // 预览图片路径
	  dialogVisible: false ,// 预览图片的对话框
	fileList:[]
	 
    }
  },
  methods: {
	  // 处理上传成功的函数
	  handleSuccess(response){
	  	// 把上传后的图片路径，交给文章对象的tabularChart
	  	this.Heartknowledge.img = response.message;
	  },
	      
	  // 删除图片的事件
	  handleRemove(file, fileList) {
	  	console.log(file, fileList);
	  	// 移除数据
	  	this.Heartknowledge.img ='';
	  },
	      
	  // 预览图片事件
	  handlePictureCardPreview(file) {
	  	this.dialogImageUrl = file.url;
	  	this.dialogVisible = true;
	  },
	  
	  
	  deleteHeartknowledge(id){
		   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
		       confirmButtonText: '确定',
		       cancelButtonText: '取消',
		       type: 'warning'
		    })
		    .then(() => {
		
		        this.$http.get('HeartknowledgeController/deleteByPrimaryKey'+'?id='+id )
		            .then(resp => {
		            if (resp.data.status == 200) {
		               this.$message.success(resp.data.message)
		                this.queryList
		             } else {
		               this.$message.error(resp.data.message)
		              }
		             })
		         })
		          .catch(() => {
		            this.$message({
		              type: 'info',
		              message: '已取消删除'
		            })
		          })
	  },
	  
	  
    // 添加文章
    addHeartknowledge() {
     if (this.Heartknowledge.id) { // 有值为true  修改
     		this.$http.post("HeartknowledgeController/updateByPrimaryKeySelective", this.Heartknowledge)
     		.then(resp => {
     			if (resp.data.status == 200) {
     			// 消息提示
     			this.$message.success('修改成功！');
     			// 清空数据
     			this.Heartknowledge = { // 文章对象
     					// 文章对象
     					"id":'',
     					"name": "",
     					"simplyintroduce": "",
     					"img": "",
     					"text": ""
     				}
     				// 关闭对话框
     				this.dialogFormVisible = false;
     				// 重新查询
     				this.queryList()
     		} else {
     				this.$message.error('接口异常！')
     				}
     		})
     
           }else {
        this.$http.post("HeartknowledgeController/insert", this.Heartknowledge)
            .then(resp => {
              if (resp.data.status == 200) {
                // 消息提示
                this.$message.success('添加成功！');
                // 清空数据
                this.Heartknowledge = {
                 // 文章对象
                 "id":'',
                 "name": "",
                 "simplyintroduce": "",
                 "img": "",
                 "text": ""
                }
                // 关闭对话框
                this.dialogFormVisible = false;
                // 重新查询
                this.queryList()
              } else {
                this.$message.error('接口异常！')
              }
            })
      }
	  	fileList:[]
    },
    /// 取消对话框
    cancle() {
      this.dialogFormVisible = false;
      this.Heartknowledge = {
        // 文章对象
        "id":'',
        "name": "",
        "Heartknowledgeintroduce": "",
        "tabularchart": "",
        "details": "",
        "readquantity": 0,
        "collects": 0,
        "teacherId": 1,
        "typeId": 1,
      }
    },
    search(){
      this.queryInfo.pageNum=1;
      this.queryList();
    },
    // 进入添加的对话框
    toAddHeartknowledge() {
      this.title = "新增文章";
      this.dialogFormVisible = true;
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize=size;
      console.log("size"+size)

      this.queryList();
    },
    handleCurrentChange(num) {
      this.queryInfo.pageNum=num;
      console.log('num:'+num)

      this.queryList();
    },
    // 分页查询信息的方法
    queryList() {
      console.log(this.queryInfo);
      // 调用后端接口来获取数据
      this.$http.get('HeartknowledgeController/findAll', {
        params: this.queryInfo
      })
          .then(resp => {
            if (resp.data.status == 200) {
              console.log(resp.data)
              this.HeartknowledgeList = resp.data.data.list;
              this.total = resp.data.data.total;
              console.log(this.HeartknowledgeList)
            } else {
              this.$message.error('查询失败！')
            }
          })
    },
	// 进入修改的预览数据页面
	toEditHeartknowledge(row) {
		//console.log(row)
		// 赋值
		this.Heartknowledge = row;
		// 设置标题
		this.title = "修改文章";
		// 开启对话框
		this.dialogFormVisible = true;
		this.fileList=[{
				name:row.img,
				url:'http://localhost:8888/sfzy/downLoad?filename='+row.img
				}];
	
	}
  },
  mounted() {
    this.queryList();
  }
}
</script>
<style>
	/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
	.ql-container{
		min-height: 200px;
	}
.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}

.el-pagination {
  margin-top: 15px;
}

.el-link {
  padding: 0 5px;
}
</style>